<div class="container user-form-screen">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div class="user-form-container">
        <h3 class="center-block sys-title">
          <img class="form-logo" src="assets/images/mask.svg" alt="logo"> SN-Admin
        </h3>
        <form [formGroup]="loginForm" (ngSubmit)="doLogin()" novalidate class="form-horizontal" role="form">
          <div class="form-group" [ngClass]="{ 'has-error':loginForm.get('userName').invalid && loginForm.get('userName').touched}">
            <label class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" formControlName="userName" placeholder="请输入用户名...">
              <span class="help-block" *ngIf="loginForm.hasError('required','userName') && loginForm.get('userName').touched">
                用户名必须输入！
              </span>
            </div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': loginForm.get('password').invalid && loginForm.get('password').touched}">
            <label class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" formControlName="password" placeholder="请输入密码...">
              <span class="help-block" *ngIf="loginForm.hasError('required','password') && loginForm.get('password').touched">
                密码必须输入！
              </span>
              <span class="help-block" *ngIf="loginForm.hasError('minlength','password') && loginForm.get('password').touched">
                请至少输入{{loginForm.getError('minlength','password').requiredLength}}位字符！
              </span>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input name="remeberMe" type="checkbox" formControlName="remeberMe">记住我
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="pull-right btn btn-info" (click)="toRegister()">注册</button>
              <button type="submit" class="btn btn-success" [disabled]="loginForm.invalid">登录</button>
              <button type="button" class="btn btn-danger" (click)="forgetPwd()">忘记密码？</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
